<template>
  <div id="header">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="home">主页</el-menu-item>
      <el-menu-item index="2" @click="users">用户管理</el-menu-item>
      <el-menu-item index="3" @click="blogs">博客管理</el-menu-item>
      <el-menu-item index="4" @click="addBlog">添加博客</el-menu-item>
      <el-menu-item index="5" @click="apiBlog">博客API管理</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      home() {
        this.$router.push({path: '/index'})
      },
      users() {
        this.$router.push({path: '/user/show'})
      },
      blogs() {
        this.$router.push({path: '/blog/show'})
      },
      addBlog(){
        this.$router.push({path: '/blog/add'})
      },
      apiBlog(){
        this.$router.push({path: '/blog/api'})
      }
    }
  }
</script>

<style scoped>

</style>
